<template>
	<div class="login-box">
		<div class="top">
			<!-- <a-avatar :src="require('@/assets/logo.png')" style="width: 0.5rem;height: 0.5rem;border-radius: 50%;margin-left: 1.5rem;float: left;" />
			<div class="title">{{common.mc}}</div> -->
		</div>
		<div class="logo">杭州钱塘新区中小学教育质量综合评价平台</div>
		<video class="video" autoplay muted loop src="../../assets/bg.mp4"></video>
		<!-- <div class="animation animation1"></div>
        <div class="animation animation2"></div>
        <div class="animation animation3"></div>
        <div class="animation animation4">
            <div class="animation animation5"></div>
            <div class="animation animation6"></div>
            <div class="animation animation7"></div>
            <div class="animation animation8"></div>
            <div class="animation animation9">
                <div class="animation animation10"></div>
                <div class="animation animation11"></div>
            </div>
            <div class="animation animation12">
                <div class="animation animation13"></div>
                <div class="animation animation14"></div>
                <div class="animation animation15"></div>
                <div class="animation animation16"></div>
            </div>
        </div>
 -->
		<div class="login-form animation">
			<h3>钱塘新区，欢迎你</h3>
			<div class="user-layout-login" :form="form" @submit="handleSubmit">
				<div style="margin-bottom: 44px;">
					<input type="text" class="ipt" placeholder="请输入用户名" @focus="focu">
				</div>
				<div style="margin-bottom: 66px;position: relative;">
					<input type="password" class="ipt" placeholder="请输入密码" @focus="focu">
					<!-- 错误提示 -->
					<div class="err">{{error_tip}}</div>
				</div>
				<div class="login-btn" @click="handleSubmit">
					<span>登录</span>
					<!-- <a-icon v-else type="loading" /> -->
				</div>
			</div>

			<!-- 第三方登录（钉钉，微信） -->
			<!-- <div class="third-login" style="text-align: center;">
				<a-divider class="divider-title">第三方账号登录</a-divider>
				<span class="dingding" @click="dingLogin(1)"></span>
				<span class="wechat" @click="dingLogin(0)"></span>
			</div> -->
		</div>

		<!-- 错误提示 -->
		<!-- <div class="animation error-tip" ref="errorTip">
			<a-icon class="exclamation" type="exclamation" />
			<span class="error_txt">{{error_tip}}</span>
		</div> -->
	</div>
</template>

<script>
	export default {
		name: 'Login',
		data() {
			return {
				form: {},
				loading: false,
				animation: false,
				isShow: '', // 控制扫码窗口显示
				appid_dd: '', // 钉钉后台获取的appid
				anthType: 0, // 第三方类型  0是微信  1 是钉钉
				error_tip: '',
				activeId: ''
			}
		},
		created() {
			// $(function() {
			// 	//判断登录页面是否在iframe中
			// 	if (self.frameElement && self.frameElement.tagName == "IFRAME") {
			// 		parent.location.reload(); //父页面重新加载
			// 	}
			// });
		},
		mounted() {
			// localStorage.clear();
			// //绑定事件
			// window.addEventListener('keydown', this.keyDown);
		},
		methods: {
			keyDown(e) {
				//如果是回车则执行登录方法
				let data = this.form.getFieldsValue()
				if (e.keyCode == 13) {
					if (this.activeId == 'password' && !data.username) {
						document.getElementById('username').focus()
					} else if (this.activeId == 'username' && data.username) {
						document.getElementById('password').focus()
					} else if (data.username && data.password) {
						this.handleSubmit()
					}
				}
			},
			handleSubmit() {
                let that = this;
                this.$router.push({path:'/home'})
                
				// const formData = this.form.getFieldsValue();
				// this.form.validateFields(err => {
				// 	if (!err) {
				// 		that.animation = true;
				// 		setTimeout(() => {
				// 			that.loading = true;
				// 		}, 800)
				// 		API.login(formData).then(res => {
				// 			setTimeout(() => {
				// 				that.loading = false;
				// 				that.animation = false;
				// 			}, 2500)
				// 			const time = new Date(); //获取时间
				// 			const cahe_time = this.common.cachTime; //设置缓存时间
				// 			localStorage.setItem('login_all', JSON.stringify(res.data));
				// 			localStorage.setItem('login_user', JSON.stringify(res.data.user));
				// 			localStorage.setItem('permissions', JSON.stringify(res.data.permissions))
				// 			localStorage.setItem('token', res.data.token);
				// 			localStorage.setItem('roleId', res.data.user.roleId);
				// 			let obj = {
				// 				time: Date.now(),
				// 				expire: cahe_time
				// 			};
				// 			localStorage.setItem('time', JSON.stringify(obj));
				// 			that.$router.push({
				// 				path: '/index'
				// 			})

				// 		}).catch(e => {
				// 			// console.log(e,11111)
				// 			if (e.response && e.response.status == 500) {
				// 				that.error_tip = e.response.data.resultMessage;
				// 				console.log(11111)
				// 				// that.showErrToast();
				// 				setTimeout(() => {
				// 					that.loading = false;
				// 					that.animation = false;
				// 				}, 2500)
				// 				return;
				// 			}
				// 		})

				// 	}
				// })
			},
			focu(e) {
				this.error_tip = ''
				this.activeId = e.target.id
			},
			// 获取第三方登录地址
			getAuthUrl(type) {
				API.getAuthUrl(type).then(res => {
					location.href = res.data
				})
			},
			// 切换第三方登录
			dingLogin(type) {
				this.anthType = type;
				localStorage.setItem('anthType', JSON.stringify(type));
				localStorage.setItem('origin', 'login');
				this.getAuthUrl(type)
			},
			showErrToast() {
				let errorTip = this.$refs.errorTip;
				errorTip.style.top = '100px';
				setTimeout(() => {
					errorTip.style.top = '-200px';
				}, 3000)
			}
		},
		destroyed() {
			window.removeEventListener('keydown', this.keyDown, false);
		}
	}
</script>

<style lang="css">
	.login-form.animation .ant-form-item {
		margin-bottom: 0;
	}
</style>

<style lang="scss" scoped>
	@import url("../../assets/scss/animation.scss");
	.logo {
		position: absolute;
		top: 50px;
		left: 50px;
		height:60px;
		line-height: 60px;
		font-size: 24px;
		color: #e2e2e2;
		font-weight: bold;
		background: url(../../assets/img/logo.png) no-repeat left center;
		background-size: auto 80%;
		padding-left:110px;
	}
	.login-box {
		// position: relative;
		// width: 100%;
		// height: calc(100vh - 0.8rem);
		width: 100%;
		height: 100%;
		left: 0px;
		top: 0px;
		vertical-align: bottom;
		display: block;
		position: absolute;

		.video {
			width: 100%;
			height: 100%;
			display: block;
			object-fit: cover;
		}

		.top {
			position: absolute;
			top: 50px;
			left: 150px;
		}

		.title {
			float: left;
			line-height: 49px;
			font-size: 30px;
			font-weight: 600;
			color: #ffffff;
			margin-left: 20px;
		}

		.animation {
			position: absolute;
		}

		.animation1 {
			z-index: 100;
			right: 100px;
			width: 93px;
			height: 110px;
			background: transparent url(../../assets/img/login/2.png) no-repeat 50%;
			background-size: 100% auto;
			animation: animation1 1s ease;
			animation-fill-mode: forwards;
			/*当动画完成时，动画会停留在最后一帧。*/
		}

		.animation2 {
			z-index: 100;
			left: 300px;
			bottom: -100px;
			width: 93px;
			height: 110px;
			background: transparent url(../../assets/img/login/1.png) no-repeat 50%;
			background-size: 100% auto;
			animation: animation2 1s ease;
			animation-delay: 1s;
			animation-fill-mode: forwards;
			/*当动画完成时，动画会停留在最后一帧。*/
		}

		.animation3 {
			z-index: 90;
			width: 100%;
			height: 903px;
			background: transparent url(../../assets/img/login/3.png) no-repeat 50%;
			background-size: 100% auto;
			animation: animation3 1s ease;
			animation-fill-mode: forwards;
			/*当动画完成时，动画会停留在最后一帧。*/
		}

		.animation4 {
			z-index: 99;
			left: 220px;
			bottom: -726px;
			width: 1079px;
			height: 726px;
			background: transparent url(../../assets/img/login/4.png) no-repeat 50%;
			background-size: 100% auto;
			animation: animation4 1s ease;
			animation-fill-mode: forwards;
			/*当动画完成时，动画会停留在最后一帧。*/
		}

		.animation5 {
			z-index: 100;
			left: 0;
			top: 40px;
			width: 122px;
			height: 179px;
			opacity: 0;
			background: transparent url(../../assets/img/login/5.png) no-repeat 50%;
			background-size: 100% auto;
			animation: animation5 1s ease;
			animation-delay: 1s;
			animation-fill-mode: forwards;
			/*当动画完成时，动画会停留在最后一帧。*/
		}

		.animation6 {
			z-index: 100;
			right: 380px;
			bottom: 100px;
			width: 122px;
			height: 147px;
			opacity: 0;
			background: transparent url(../../assets/img/login/6.png) no-repeat 50%;
			background-size: 100% auto;
			animation: animation5 1s ease;
			animation-delay: 1s;
			animation-fill-mode: forwards;
			/*当动画完成时，动画会停留在最后一帧。*/
		}

		.animation7 {
			z-index: 100;
			right: 100px;
			top: 120px;
			width: 195px;
			height: 186px;
			opacity: 0;
			background: transparent url(../../assets/img/login/7.png) no-repeat 50%;
			background-size: 100% auto;
			animation: animation5 1s ease;
			animation-delay: 1s;
			animation-fill-mode: forwards;
			/*当动画完成时，动画会停留在最后一帧。*/
		}

		.animation8 {
			z-index: 100;
			right: 330px;
			top: 210px;
			width: 234px;
			height: 158px;
			opacity: 0;
			background: transparent url(../../assets/img/login/8.png) no-repeat 50%;
			background-size: 100% auto;
			animation: animation5 1s ease;
			animation-delay: 1s;
			animation-fill-mode: forwards;
			/*当动画完成时，动画会停留在最后一帧。*/
		}

		.animation9 {
			z-index: 100;
			right: 170px;
			bottom: 220px;
			width: 97px;
			height: 44px;
			opacity: 0;
			background: transparent url(../../assets/img/login/9.png) no-repeat 50%;
			background-size: 100% auto;
			animation: animation5 1s ease;
			animation-delay: 1s;
			animation-fill-mode: forwards;
			/*当动画完成时，动画会停留在最后一帧。*/
		}

		.animation10 {
			z-index: 100;
			top: -70px;
			left: 50%;
			margin-left: -56px;
			width: 112px;
			height: 110px;
			background: transparent url(../../assets/img/login/10.png) no-repeat 50%;
			background-size: 100% auto;
			animation: animation6 2s infinite;
			animation-delay: 1s;
		}

		.animation11 {
			z-index: 100;
			top: -120px;
			left: 50%;
			margin-left: -37px;
			width: 74px;
			height: 110px;
			background: transparent url(../../assets/img/login/11.png) no-repeat 50%;
			background-size: 100% auto;
			animation: animation7 2s infinite;
			animation-delay: 1s;
		}

		.animation12 {
			z-index: 100;
			left: 120px;
			top: -50px;
			width: 407px;
			height: 533px;
			opacity: 0;
			background: transparent url(../../assets/img/login/12.png) no-repeat 50%;
			background-size: 100% auto;
			animation: animation5 1s ease;
			animation-delay: 1s;
			animation-fill-mode: forwards;
			/*当动画完成时，动画会停留在最后一帧。*/

			&::after {
				content: '';
				position: absolute;
				bottom: 25px;
				right: 10px;
				width: 90px;
				height: 142px;
				background: transparent url(../../assets/img/login/12_1.png) no-repeat 50%;
				background-size: 100% auto;
			}
		}

		.animation13 {
			z-index: 100;
			left: 50%;
			top: 65px;
			margin-left: -93.5px;
			width: 187px;
			height: 301px;
			background: transparent url(../../assets/img/login/13.png) no-repeat 50%;
			background-size: 100% auto;
			animation: animation8 2s ease infinite;
			animation-delay: 1s;
			animation-fill-mode: forwards;
			/*当动画完成时，动画会停留在最后一帧。*/
		}

		.animation14 {
			z-index: 100;
			left: 50%;
			top: 150px;
			margin-left: -37px;
			width: 74px;
			height: 129px;
			background: transparent url(../../assets/img/login/14.png) no-repeat 50%;
			background-size: 100% auto;
			animation: animation9 2s ease infinite;
			animation-delay: 1s;
			animation-fill-mode: forwards;
			/*当动画完成时，动画会停留在最后一帧。*/
		}

		.animation15 {
			z-index: 100;
			left: 50%;
			top: 0;
			margin-left: -109.5px;
			width: 219px;
			height: 211px;
			background: transparent url(../../assets/img/login/15.png) no-repeat 50%;
			background-size: 100% auto;
			animation: animation10 2s ease infinite;
			animation-delay: 1s;
			animation-fill-mode: forwards;
			/*当动画完成时，动画会停留在最后一帧。*/
		}

		.animation16 {
			z-index: 100;
			left: 50%;
			top: 70px;
			margin-left: -141.5px;
			width: 283px;
			height: 242px;
			background: transparent url(../../assets/img/login/16.png) no-repeat 50%;
			background-size: 100% auto;
			animation: animation11 2s ease infinite;
			animation-delay: 1s;
			animation-fill-mode: forwards;
			/*当动画完成时，动画会停留在最后一帧。*/
		}

		.login-form {
			z-index: 110;
			width: 385px;
			height: 506px;
			background-color: #1883f12b;
			border: 1px solid #279bff;
			border-radius: 40px;
			right: 250px;
			top: -1000px;
			margin-top: -253px;
			animation: animation12 1s ease;
			animation-delay: 1s;
			animation-fill-mode: forwards;

			/*当动画完成时，动画会停留在最后一帧。*/
			&::before {
				content: '';
				width: 70%;
				background: url(../../assets/img/login/top-light.png)center center no-repeat;
				background-size: 100%;
				position: absolute;
				top: -11px;
				left: 15%;
				height: 20px;
			}

			&::after {
				content: '';
				width: 70%;
				background: url(../../assets/img/login/bottom-light.png)center center no-repeat;
				background-size: 100%;
				position: absolute;
				bottom: -10px;
				left: 15%;
				height: 20px;
			}

			:global(.ant-input) {
				text-align: center;
				height: 56px;
				border: none;
				border-bottom: 1px solid rgba(255, 255, 255, 0.2);
				color: #fff;
				margin-bottom: 0;
				// border-radius: 0.28rem;
				font-size: 17px;
				background-color: transparent;
				outline: 0;
				border-radius: 0;
				padding: 0;
			}

			:global(.ant-input:focus) {
				background-color: transparent;
				// background-color: #ffffff;
			}

			h3 {
				text-align: center;
				font-size: 24px;
				margin-top: 62px;
				font-weight: 600;
				color: #fff;
				margin-bottom: 0;
				height: 26px;
			}

			.user-layout-login {
				padding: 0 50px;
				margin-top: 66px;
                .ipt{
                    width: 100%;
                    font-size: 18px;
                    text-align: center;
                    color: #FFF;
                    line-height: 56px;
                    background: transparent;
                    border-bottom: 1px solid rgba($color: #FFF, $alpha: .2);
                }
				.login-btn {
					margin: 0 auto;
					width: 100%;
					height: 56px;
					line-height: 56px;
					text-align: center;
					border-radius: 6px;
					color: #ffffff;
					font-size: 20px;
					background-color: rgba(21, 141, 255, 0.5);

					&.active,
					&:hover {
						cursor: pointer;
						background-color: #279bff7a;
					}

					&.animation-loading {
						transition: all 1s;
						width: 56px;
					}
				}

				.loading-box {
					width: 56px;
					height: 56px;
					line-height: 56px;
					margin: 0 auto;
					text-align: center;
					border-radius: 50%;
					color: #ffffff;
					font-size: 35px;
					background-color: #158DFF;
				}
			}
		}

		.third-login {
			padding: 0 60px;

			.divider-title {
				color: #999999;
				font-size: 14px;
				margin-top: 80px;
			}

			span {
				display: inline-block;
				width: 44px;
				height: 44px;
				cursor: pointer;
			}

			.dingding {
				background: transparent url(../../assets/img/login/dd.png) no-repeat 50%;
				background-size: 100% auto;
			}

			.wechat {
				margin-left: 36px;
				background: transparent url(../../assets/img/login/wechat.png) no-repeat 50%;
				background-size: 100% auto;
			}
		}

		.error-tip {
			top: -200px;
			right: 250px;
			width: 480px;
			height: 72px;
			line-height: 72px;
			background-color: #FFB600;
			border-radius: 36px;
			transition: all 1s;

			.exclamation {
				display: inline-block;
				vertical-align: middle;
				margin-left: 23px;
				width: 32px;
				height: 32px;
				line-height: 32px;
				border-radius: 50%;
				text-align: center;
				color: #FFB600;
				background-color: #ffffff;
				font-size: 22px;
				font-weight: 600;
			}

			.error_txt {
				color: #ffffff;
				font-size: 24px;
				margin-left: 18px;
			}
		}
	}

	.has-error .ant-input:not([disabled]):hover {
		outline: 0;
		border-color: rgba(255, 255, 255, 0.2);
	}

	.has-error .ant-input:focus {
		border-color: rgba(255, 255, 255, 0.2);
		outline: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
		border-right-width: 0 !important;
	}

	input:-webkit-autofill {
		-webkit-text-fill-color: #ededed !important;
		-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
		background-color: transparent;
		background-image: none;
		transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
	}

	.ant-input:focus {
		box-shadow: none;
	}

	.err {
		position: absolute;
		color: red;
	}
</style>
